<template>
    <!-- 这是我的账号详情 -->
    <div class="main">
        <h2>我的账号</h2>
        <div class="particulars">
            <span>您好</span>
            <p>您好 您可在我的账户中追踪订单信息，修改我的账户信息，管理配送地址信息以及咨询心愿清单中的表款信息。</p>
        </div>
        <div class="accouny">
            <div>账号信息</div>
            <div>
                <p>{{number}}</p>
                <router-link to="">编辑信息</router-link>
            </div>
        </div>
        <div class="address">
            <div>配送地址</div>
            <div>
                <p v-if="cityAddressArr.length === 0">你还没有设置地址信息</p>
            </div>
            <div v-if="cityAddressArr.length >= 1" class="addressTo">
                <p>{{cityAddressArr[0].name}}</p>
                <p>{{cityAddressArr[0].phone}}</p>
                <p>{{cityAddressArr[0].area_name}}</p>
                <p>{{cityAddressArr[0].desc}}</p>
            </div>
            <router-link to="/myaccount/myaddress">添加配送地址</router-link>
        </div>
    </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'
export default {
    data() {
        return {
            number: JSON.parse(this.$Cookie.get('user')).phone
        }
    },
    created() {
        // 请求自己的地址列表
        this.getMyAdderss()
        console.log(this.number)
    },
    methods: {
        ...mapActions('address',["getMyAdderss"])
    },
    computed: {
        ...mapState("address", ["cityAddressArr"])
    }
}
</script>

<style lang="scss" scoped>
    .main {
        width: 100%;
        padding: 0 0 100px 90px;
        text-align: left;
        h2 {
            font-size: 40px;
            font-weight: 400;
            margin: 40px 25px 40px 0;
            color: #003570;
        }
        .particulars {
            color: #84888b;
            span {
                font-size: 24px;
            }
        }
        .accouny,
        .address {
            margin: 20px 0 0;
            overflow: hidden;
            div:first-child {
                font-size: 18px;
                font-weight: 600;
                width: 100%;
                padding: 26px 0 23px 30px;
                background: #E6EAED;
            }
            div:nth-child(2),
            .addressTo {
                padding: 14px 0 0 40px;
                p {
                    font-size: 14px;
                    padding: 20px 0 0 0;
                }
            }
            .addressTo {
                p {
                    padding: 0;
                }
            }
            a {
                float: right;
                color: #003570;
                text-decoration-line: underline;
            }
        }
    }
</style>